<template>
  <div>
    <div class="sqlButton1">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          系统变量<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu style="width: 500px;margin-top: 5px;" slot="dropdown" >
          <el-dropdown-item command="header">当前系统变量仅支持内部接口引用</el-dropdown-item>
          <el-dropdown-item divided command="user">
            <span>@user</span>
            <span style='float:right'>当前用户</span>
          </el-dropdown-item>
          <el-dropdown-item command="dept">
            <span>@department</span>
            <span style='float:right'>当前部门</span>
          </el-dropdown-item>
          <el-dropdown-item command="deptAndSubdept">
            <span>@currentDepartmentAndSubdepartment</span>
            <span style='float:right'>当前部门及子部门</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <textarea key ref="mycode" class="codesql" v-model="value"> </textarea>
  </div>
</template>
<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
export default {
  data() {
    return {
      editor: null,
      selectedSystemVar:'' //选中的系统变量
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    sqlStyle: {
      type: String,
      default: "default",
    }
  },
  watch: {
    newVal(newV, oldV) {
      if (this.editor) {
        this.$emit("changeTextarea", this.editor.getValue());
      }
    },
  },
  computed: {
    newVal() {
      if (this.editor) {
        return this.editor.getValue();
      }
    },
  },

  mounted() {
    let mime = "text/x-mariadb";
    //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
    this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      value: this.value,
      mode: mime, //选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      cursorHeight: 1,
      lineWrapping: true,
      readOnly: false,
      //theme: theme,
      // autofocus: true,
      extraKeys: { Ctrl: "autocomplete" }, //自定义快捷键
      hintOptions: {
        //自定义提示选项
        // 当匹配只有一项的时候是否自动补全
        completeSingle: false,
        // tables: {
        //     users: ['name', 'score', 'birthDate'],
        //     countries: ['name', 'population', 'size']
        // }
      },
    });
    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
    this.editor.on("inputRead", () => {
      this.editor.showHint();
    });
  },
  methods: {
    setVal() {
      if (this.editor) {
        if (this.value === "") {
          this.editor.setValue("");
        } else {
          this.editor.setValue(this.value);
        }
      }
    },
    //系统变量操作
    handleCommand(command) {
      if(command === 'user'){
        this.selectedSystemVar = '@user'
      }else if(command === 'dept'){
        this.selectedSystemVar = '@department'
      }else if(command === 'deptAndSubdept'){
        this.selectedSystemVar = '@currentDepartmentAndSubdepartment'
      }else{
        this.selectedSystemVar = ''
      }

      //将选中系统变量放置光标处
      let post1=this.editor.getCursor();
      console.log('post1',post1);
      let pos2={
          line:post1.line,  //行号
          ch:post1.ch //光标位置
      }
      this.editor.replaceRange(this.selectedSystemVar,pos2)  //替换内容
    },
  },
};
</script>
<style>
.CodeMirror {
  color: black;
  /* direction: ltr; */
  line-height: 22px;
  border: 1px solid #dcdfe6;
}
.CodeMirror-hints {
  z-index: 9999 !important;
}
.sqlButton1 {
  position: absolute;
  right: 10px;
  top: 4px;
  cursor: pointer;
  text-decoration: underline;
  z-index: 2;
}
</style>